<!-- src/views/home/HomeBanner.vue -->
<script setup>
import { getBannerAPI } from '@/apis/home'
import { onMounted, ref } from 'vue'
// import { getDjangoAPI } from '@/apis/djangoapi'

const bannerList = ref([])
// 调用接口，获取banner数据
const getBanner = async () => {
  const res = await getBannerAPI()
  // console.log(res)
  bannerList.value = res.result
}

onMounted(() => {
  getBanner()
})

// // 调用接口，获取django数据
// const getDjango = async () => {
//   const res = await getDjangoAPI()
//   // 循环语句 for in
//   // for ( let key in res) {
//   //   console.log(`key: ${key}, value: ${res[key]}, type: ${typeof res[key]}`)
//   // }

//   // 循环语法 foreach
//   Object.keys(res).forEach(key => {
//     // console.log(`key: ${key}, value: ${res[key]}, type: ${typeof res[key]}`)
//     console.log(res[key])
//     console.log(typeof res[key])
//   })

//   console.log(res)
// }

// onMounted(() => {
//   getDjango()
// })

</script>


<template>
  <div class="home-banner">
    <el-carousel height="500px">
      <el-carousel-item v-for="item in bannerList" :key="item.id">
        <!-- 绑定图片地址 -->
        <img :src="item.imgUrl" alt="图片">
      </el-carousel-item>
    </el-carousel>
  </div>
</template>


<style scoped lang='scss'>
// 轮播图样式
.home-banner {
  width: 1240px;
  height: 500px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 98;

  img {
    width: 100%;
    height: 500px;
  }
}
</style>
